<template>
  <div class="loading-wrap">
    <div class="loading-box">
      <div class="loading">
        <div class="page page-1" />
        <div class="page page-2" />
        <div class="page page-3" />
        <div class="page page-4" />
        <div class="page page-5" />
      </div>
      <p>加载中... </p>
    </div>
  </div>
</template>

<script lang="ts" setup>

  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   * @Name: DomTest
   * @Author: Zhang Ziyi
   * @Email: 15227974559@163.com
   * @Date: 2024-07-29 18:14
   * @Introduce: --
   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  // import { Http } from '@/utils/http';

</script>

<style lang="scss" scoped>

  .loading-wrap {
    @include flex(center, center);

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;

    background: rgba(255, 255, 255, 0.8);
  }


  .loading-box {
    text-align: center;
    height: calc(60px * 1.2 + 30px);
    position: relative;

    >p {
      position: absolute;
      bottom: 0;
      width: 100%;
      color: var(--el-color-primary);
      user-select: none;
    }
  }

  .loading {
    width: 100px;
    height: 60px;
    position: relative;
    // background-color: #fff;
    overflow: hidden;
    border-radius: 60px 60px 0 0;

    transform: scale(1.4);

    &::before,
    &::after {
      position: absolute;
      width: 50px;
      height: 10px;
      border: 5px solid var(--el-color-primary);
      border-radius: 10px;
      bottom: -10px;
    }

    &::before {
      content: '';
      left: -9px;
    }

    &::after {
      content: '';
      right: -9px;
    }

    @keyframes rotateCircle {
      0% {
        transform: rotate(0deg);
        opacity: 0;
      }

      10% {
        transform: rotate(0deg);
        opacity: 1;
      }

      90% {
        transform: rotate(180deg);
        opacity: 1;
      }

      100% {
        transform: rotate(180deg);
        opacity: 0;
      }
    }

    .page {
      height: 5px;
      width: 50px;
      // background: var(--el-color-primary);
      position: absolute;

      bottom: 10px;
      left: -5px;

      transform-origin: calc(100% + 5px) 50%;

      $colors: (
        1: var(--el-color-primary),
        2: var(--el-color-success),
        3: var(--el-color-info),
        4: var(--el-color-warning),
        5: var(--el-color-danger)
      );

    @each $i, $color in $colors {
      &-#{$i} {
        background: $color;
      }
    }

    $time: 1.5s;

    @for $i from 0 to 5 {
      &-#{$i + 1} {
        animation: linear rotateCircle $time infinite calc($time / 5 * $i);
      }
    }
  }


}
</style>